import { safeIndexApi } from '@/api';
import useWindowSize from '@/common/resizeUpdate';
import { message } from 'antd';
import * as echarts from 'echarts';
import type { FC } from 'react';
import { useEffect, useRef } from 'react';
import Ostyle from './index.module.less';
/**
 * @desc 安全指数指标得分比较 dxr 20231222
 */
export const ScoreCompare: FC<any> = (props) => {
  console.log(props, 'props');
  const chartDom = useRef<HTMLDivElement>(null);
  const myChart = useRef<echarts.EChartsType>();
  const params = {
    entId: props.entId,
    driverId: props.driverId,
  };
  const windowSize = useWindowSize();
  useEffect(() => {
    if ((!myChart.current || myChart.current.isDisposed()) && chartDom.current) {
      // 初始化值
      myChart.current = echarts.init(chartDom.current);
      myChart.current.setOption({
        title: {
          text: '安全指数指标得分比较',
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter(params: { name: string; seriesName: string; value: string; marker: string }[]) {
            let htmlText = `<div style="color:#333;font-size:14px;line-height:20px"><p style="font-weight: bold; color: #333; margin-bottom: 6px">${params[0].name}</p>`;

            params.forEach((item) => {
              htmlText += `<p style="margin-bottom:6px" >${item.marker}${item.seriesName}<span style="font-weight:600;margin-left:8px">${item.value}分</span></p>`;
            });

            htmlText += '</div>';

            return htmlText;
          },
        },
        legend: {
          right: '1%',
          data: ['自身指标得分', '同行平均得分'],
        },
        grid: {
          left: '1%',
          right: '6%',
          bottom: '2%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['司机自身', '驾驶陋习', '主动安全', '速度相关'],
          axisLabel: {
            color: '#999999',
            fontWeight: 400,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#E9EFF3',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#E9EFF3',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            interval: 0,
            color: '#999999',
            fontWeight: 400,
          },
          splitLine: {
            lineStyle: {
              color: '#C9E4FC',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#999',
            },
          },
        },
        series: [
          {
            name: '自身指标得分',
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#FF6D3B',
            },
            symbol: 'none',
            data: [],
          },
          {
            name: '同行平均得分',
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#66CCAA',
            },
            symbol: 'none',
            data: [],
          },
        ],
      });
      return () => {
        if (myChart.current && !myChart.current.isDisposed()) {
          echarts.dispose(myChart.current);
        }
      };
    }
  }, []);
  const getData = () => {
    let requestApi;

    if (props.entId) {
      requestApi = safeIndexApi.getSafetyIndexEntPeerCompareApi(params);
    } else if (props.driverId) {
      requestApi = safeIndexApi.getSafetyIndexPeerCompareApi(params);
    } else {
      return message.error('type 未定义');
    }
    requestApi
      .then((res: any) => {
        console.log(res, 'res');
        const { code, msg } = res;
        if (code === '200') {
          const data = res.data;
          if (myChart.current) {
            myChart.current.setOption({
              // 标签数据 '司机自身', '驾驶陋习', '主动安全', '速度相关'
              series: [
                {
                  data: [data.selfScore, data.badDrivingHabitsScore, data.activeSafetyScore, data.speedDependentScore],
                },
                {
                  data: [
                    data.selfPeerAverageScore,
                    data.badDrivingHabitsPeerAverageScore,
                    data.activeSafetyPeerAverageScore,
                    data.speedDependentPeerAverageScore,
                  ],
                },
              ],
            });
          }
        } else {
          message.error(msg);
        }
      })
      .catch((err: any) => {
        console.log('--AddSChoice--_formSub--err--:', err);
      })
      .finally(() => {
        // setLoadingDetail({ subBtnDis: false, viewLoading: false });
      });
  };
  // const { data } = useRequest(
  //   async () => {
  //     return await getSafetyIndexPeerCompareApi(params);
  //   },
  //   {
  //     // refreshDeps: [params],
  //     onSuccess(res: any) {
  //       if (res.code == '200') {
  //       }
  //     },
  //   },
  // );
  window.onresize = () => {
    setTimeout(() => {
      myChart.current?.resize();
    }, 1000);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div className={Ostyle.scorecompare_body}>
      {/* <div className={Ostyle.cont_1_title}>安全指数指标得分比较</div> */}
      <div
        className={`${Ostyle.cont_1_cont} ${
          windowSize.innerWidth > 1600 ? Ostyle.cont_1_b_cont : Ostyle.cont_1_s_cont
        }`}
      >
        <div className="flexr alc juc">
          <div ref={chartDom} className={Ostyle.cont_1_main}></div>
        </div>
      </div>
    </div>
  );
};
